<template>
  <div class="body">
    <div class = "text" align="center" >兰州名城科技在线报告管理系统</div>
    <div class="login" align="center">
      <div class="login-title">
        <h4>登录</h4>
      </div>
      <el-form :model="form" class="form" :rules="rules" ref="form">
        <el-form-item prop="username">
          <el-input v-model="form.username" prefix-icon="el-icon-user" minlength="3" maxlength="30" placeholder="请输入用户名" size="small" clearable/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" prefix-icon="el-icon-lock" minlength="6" maxlength="30" placeholder="请输入密码" size="small" clearable type="password" @keyup.enter.native="submit"/>
        </el-form-item>
        <el-form-item prop="authCode">
          <el-row>
            <el-col :span="16">
              <el-input v-model="form.authCode" placeholder="请输入验证码" size="small" clearable type="text" @keyup.enter.native="submit">
              </el-input>
            </el-col>
            <el-col :span="8">
              <el-image style="padding-top: 5px;" :src="authCodeUrl" @click="getCaptchaJpg()"></el-image>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {httpBaseUrl} from "@/util/globa";

export default {
  name: "Login",
  data () {
    return {
      form: {
        username: '',
        password: '',
        uuid: 'xxx',
        authCode: ''
      },
      authCodeUrl: '',
      rules: {
        username: [
          { required: true, type: 'string', message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 30, message: '用户名长度在3-30位之间', trigger: 'blur' },
          { pattern: /^[0-9A-Za-z_]{3,30}$/, message: '只能包含数字、字母、下划线', trigger: 'blur' }
        ],
        password: [
          { required: true, type: 'string', message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 30, message: '密码长度在6-30位之间', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,30}$/, message: '密码只能包含数字、字母、特殊字符', trigger: 'blur' }
        ],
        authCode: [
          { required: true, type: 'string', message: '验证码不能为空', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((v) => {
        if(v) {
          this.$http({
            url: this.$http.adornUrl(`/admin/login`),
            method: 'post',
            data: {
              adPassWord: this.form.password,
              adUserName: this.form.username,
              authcode: this.form.authCode,
              uuid: this.form.uuid
            },
          }).then(res => {
            console.log(res);
            if (res.code === 0) {
              this.$Message.success('登录成功！')
              const menuList = res.data.menuList;
              sessionStorage.setItem('token', res.data.token)
              // res.data.menuList.push({
              //   "id": "抽样单",
              //   "name": "抽样单",
              //   "url": "/sampleSheet",
              //   "icon": "el-icon-s-custom"
              // });
              // res.data.menuList.push({
              //   "id": "验样单",
              //   "name": "验样单",
              //   "url": "/sampleInspection",
              //   "icon": "el-icon-s-custom"
              // });
              // res.data.menuList.push({
              //   "id": "抽样单审核",
              //   "name": "抽样单审核",
              //   "url": "/sampleSheetAudit",
              //   "icon": "el-icon-s-custom"
              // });
              // res.data.menuList.push({
              //   "id": "安全性检查记录",
              //   "name": "安全性检查记录",
              //   "url": "/safetyAssessment",
              //   "icon": "el-icon-s-custom"
              // });
              res.data.menuList.push({
                "id": '安全性检查记录审核',
                "name": '安全性检查记录审核',
                "url": "/safetyAssessmentAudit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '试验鉴定任务通知单审核',
                "name": '试验鉴定任务通知单审核',
                "url": "/authenticationtask-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '生产试验汇总表审核',
                "name": '生产试验汇总表审核',
                "url": "/summary-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '植被覆盖率测定记录表审核',
                "name": '植被覆盖率测定记录表审核',
                "url": "/vegetation-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '作业速度测定记录表审核',
                "name": '作业速度测定记录表审核',
                "url": "/speed-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '土壤坚实度审核',
                "name": '土壤坚实度审核',
                "url": "/firmness-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '气象条件检测记录表审核',
                "name": '气象条件检测记录表审核',
                "url": "/temperature-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '一致性检查记录表审核',
                "name": '一致性检查记录表审核',
                "url": "/cons_check-list-audit",
                "icon": "el-icon-s-custom"
              });
              res.data.menuList.push({
                "id": '主要仪器设备记录表审核',
                "name": '主要仪器设备记录表审核',
                "url": "/instrument-list-audit",
                "icon": "el-icon-s-custom"
              });

              res.data.menuList.push({
                "id": '用户调查汇总表审核',
                "name": '用户调查汇总表审核',
                "url": "/usersurvery-list-audit",
                "icon": "el-icon-s-custom"
              });
              // res.data.menuList.push({
              //   "id": '资料移交清单',
              //   "name": '资料移交清单',
              //   "url": "/handoverChecklist",
              //   "icon": "el-icon-s-custom"
              // });
              sessionStorage.setItem('menuList', JSON.stringify(res.data.menuList));
              sessionStorage.setItem('user', JSON.stringify(res.data.user));
              sessionStorage.setItem("roleList", JSON.stringify(res.data.roleList));
              if (menuList && menuList.length)
                this.$router.push(menuList[0].children && menuList[0].children.length ?
                menuList[0].children[0].url : menuList[0].url);
              else this.$Message.error("无可访问页面");
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    getCaptchaJpg() {
      this.form.uuid = Math.random().toString(36);
      this.authCodeUrl = httpBaseUrl + '/admin/captchaJpg?uuid=' + this.form.uuid;
    }
  },
  mounted() {
    this.getCaptchaJpg();
  }
}
</script>

<style lang="scss">
.body {
  width: 100%;
  height: 100%;
  background: url("../assets/bg.jpg") no-repeat center top;
}
.text{
  width: 900px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 30%;
  color: aliceblue;
  transform: translateX(-50%) translateY(-50%);
  //background-color: rgba(0, 0, 0, 0.1);
  font-size: 60px;
}
.login {
  width: 400px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  .login-title {
    font-size: 26px;
    margin-top: 20px;
    color: aliceblue;
  }

  .form {
    margin: 30px;
  }
}
</style>